<!-- 开头/片尾库 -->
<template>
	<view class="open-library-page">
		<!-- 选择片头 -->
		<view class="padding_20rpx">
			<view class="display-a-js margin_20rpx_0">
				<view class="font-size_32rpx font-weight">选择片头</view>
				<view class="upload-btn display-a-jc">
					<image src="/static/cloud/upload.png"></image>
					<view>上传</view>
				</view>
			</view>
			<view class="font-size_24rpx color_999999">最多只能上传5个</view>
		</view>
		<view class="display-fw-a video-cls">
			<block v-for="(i, j) in 5" :key="j"><image src="/static/26.png"></image></block>
		</view>

		<!-- 选择片尾 -->
		<view class="padding_20rpx">
			<view class="display-a-js margin-bottom_20rpx">
				<view class="font-size_32rpx font-weight">选择片尾</view>
				<view class="upload-btn display-a-jc">
					<image src="/static/cloud/upload.png"></image>
					<view>上传</view>
				</view>
			</view>
			<view class="font-size_24rpx color_999999">最多只能上传5个</view>
		</view>
		<!-- <view class="display-fw-a video-cls">
			<block v-for="(i, j) in 5" :key="j"><image src="/static/26.png"></image></block>
		</view> -->
		<view class="none-cls flex-column margin_20rpx_0">
			<image src="/static/cloud/none.png"></image>
			<view>-- 暂无视频 --</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style lang="less">
page {
	background-color: #fff;
}
.open-library-page {
	.upload-btn {
		width: 132rpx;
		height: 52rpx;
		border-radius: 16rpx;
		background: #1e6ceb;
		image {
			width: 38rpx;
			height: 38rpx;
			margin-right: 4rpx;
		}
		view {
			color: #fff;
			font-size: 28rpx;
		}
	}
	.video-cls {
		padding: 10rpx;
		image {
			width: calc(100% / 2 - 16px);
			margin: 0 16rpx 20rpx;
			height: 220rpx;
		}
	}
	// “暂无数据” 样式
	.none-cls{
		image{
			margin-bottom: 20rpx;
			width: 324rpx;
			height: 324rpx;
		}
		view{
			color: #999;
			font-size: 28rpx;
		}
	}
}
</style>
